<template>
    <div class="container">
        <div style="width: 70%;margin: auto;">
            <el-card>
                <div slot="header" style="text-align: center;">
                    <h3 style="margin: 3px">{{bookDetail.name}}</h3>
                </div>
                <div style="display: flex;height: 250px;">
                    <div style="width: 20%">
                        <img :src="bookDetail.imageUrl" style="width: 225px;height: 250px">
                    </div>
                    <div style="border:solid;border-width: 1px;border-color: #EBEEF5">

                    </div>
                    <div style="width: 40%;margin-left: 50px">
                        <p>书名：<span>{{bookDetail.name}}</span></p>
                        <p>作者：<span>{{bookDetail.author}}</span></p>
                        <p>出版社：<span>{{bookDetail.press}}</span></p>
                        <p>定价：<span>{{bookDetail.price}}￥</span></p>
                        <p>库存：<span>{{bookDetail.storeMount}}</span></p>
                        <el-button-group>
                            <el-button size="small" plain type="primary" @click="addtoCart(bookDetail.bookId)">加入购物车</el-button>
                            <el-button size="small" plain type="danger" @click="beginBuy()">直接购买</el-button>
                        </el-button-group>
                    </div>
                    <div style="width: 40%">

                    </div>
                </div>
                <el-divider><h4>图书简介</h4></el-divider>
                <div>
                    <p>{{bookDetail.detail}}</p>
                </div>
                <el-divider><h4>更多推荐</h4></el-divider>
<!--                <div style="display:flex;justify-content:space-between;flex-wrap:wrap">
                    <div style="width: 50%" v-for="(item,index) in books" :key="index">
                        <el-card style="margin: 5px;" body-style="display:flex">
                            <div style="width: 30%;cursor: pointer" v-on:click="toDetail(item.bookId)">
                                <img :src="item.imageUrl" class="image">
                            </div>
                            <div style="width:70%">
                                <div style="height: 120px">
                                    <p style="font-weight: bolder">{{item.name}}</p>
                                    <p><span>{{item.author}}</span>/<span>{{item.press}}</span></p>
                                </div>
                                <el-button-group>
                                    <el-button size="small" plain type="primary" @click="addtoCart(item.bookId)">加入购物车</el-button>
                                    <el-button size="small" plain type="danger">直接购买</el-button>
                                </el-button-group>
                            </div>
                        </el-card>
                    </div>
                </div>-->
                <book-list :book-list="books" @updateList="update"></book-list>
            </el-card>
        </div>
        <el-dialog
                title="购买数量"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-card style="margin: 5px;" body-style="display:flex">
                    <img :src="bookDetail.imageUrl" class="image">
                <div style="width: 70%">
                    <div style="height: 120px">
                        <p style="font-weight: bolder">{{bookDetail.name}}</p>
                        <p><span>{{bookDetail.author}}</span>/<span>{{bookDetail.press}}</span></p>
                        <el-input-number size="small" v-model="buyCount" :min="1"></el-input-number>
                    </div>
                </div>
            </el-card>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="directPay(bookDetail.bookId,buyCount)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import global from "../../global";
    import axios from 'axios'
    import BookList from "../../reusable/BookList";
    export default {
        name: "bookDetail",
        components: {BookList},
        data(){
            return{
                dialogVisible:false,
                bookId:this.$route.query.bookId,
                bookDetail:{},
                books:[],
                buyCount:1
            }
        },
        mounted() {
            this.getBookInfo()
/*            this.getList(10)*/
            console.log(this.bookId)
        },
        methods:{
            beginBuy(){
                this.buyCount=1
                this.dialogVisible = true
            },
            handleClose(){
                this.dialogVisible=false
            },
            async directPay(bookId,count){
                let mydata = {
                    uid:sessionStorage.getItem("userId"),
                    bookId:bookId,
                    count:count
                }
                axios.post('/cart/directPay',mydata).then((res)=>{
                    console.log(res)
                    if (res.data.code===0||res.data.code==200){
                        this.$message.success("成功")

                    }
                })
                this.handleClose()
            },
            async addtoCart(bookId){
                let mydata = {
                    uid:sessionStorage.getItem("userId"),
                    bookId:bookId,
                    count:1
                }
                console.log(mydata)
                axios.post('/cart/addBook',mydata,{
                  headers:{
                    bookId:mydata.bookId,
                    userId:window.sessionStorage.getItem("userId")
                  }
                }).then((res)=>{
                    console.log(res)
                    if(res.data.code===0||res.data.code===200){
                        this.$notify.success("加入购物车成功")
                    }
                })
            },
            update(){
                /*this.$router.push({ path:'/home/bookdetail', query:{ bookId:param } })*/
                this.getBookInfo()
                /*this.getListByCategories(10,this.bookDetail.bookCategoryId)*/
            },
            async getList(size){
                let mydata = {
                    page: global.methods.getRandomInt(10,200),
                    size: size
                }
                axios.post('/api/book/searchBookByPage',mydata).then((res)=>{
                    this.books = res.data.data
                    console.log(this.books)
                })
            },
            async getListByCategories(size,category){
                let mydata = {
                    page: global.methods.getRandomInt(0,100),
                    size: size,
                    cateIds:[category]
                }
                axios.post('/api/book/searchBookByCategory',mydata).then((res)=>{
                    this.books = res.data.data[0]
                    console.log(this.books)
                })
            },
            async recommend(size,bookId){
                let mydata = {
                    bookId:bookId,
                    page: global.methods.getRandomInt(0,15),
                    size: size,
                }
                console.log(mydata)
                axios.post('/recommend/1',mydata).then((res)=>{
                    this.books = res.data.data
                    console.log(this.books)
                })
            },
            async recommend2(size,bookId){
                let mydata = {
                    bookId:bookId,
                    page: global.methods.getRandomInt(0,15),
                    size: size,
                }
                console.log(mydata)
                axios.post('/recommend/2',mydata).then((res)=>{
                    this.books = res.data.data
                    console.log(this.books)
                })
            },
            async getBookInfo(){
                let mydata = {
                    bookId:this.$route.query.bookId,
                }
                axios.post('http://120.46.132.13:8081/api/book/search',mydata,{
                  headers:{
                    bookId:this.$route.query.bookId,
                    userId:window.sessionStorage.getItem("userId")
                  }
                }).then((res)=>{
                    console.log(res)
                    this.bookDetail = res.data.data;
                    let cateId=this.bookDetail.bookCategoryId
                    console.log(cateId)
/*                    this.getListByCategories(10,cateId)*/
                    this.recommend(10,this.bookId.toString())
                })
            }
        }
    }
</script>

<style scoped>
    .container{
        width: 100%;
    }
    .image{
        height: 180px;
        width:150px;
    }
</style>
